<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编辑动态 - 测盟汇系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5/38.1.1/classic/ckeditor.js"></script>
    <style>
        :root {
            --primary-color: #2c5545;
            --primary-light: #3a7d62;
            --primary-hover: #1e4636;
            --accent-color: #8ba888;
            --dynamic-color: #cce622;
            --text-color: #333;
            --text-light: #555;
            --border-color: #d1d9d6;
            --bg-light: #f5f7f6;
            --bg-page: #e8ecea;
            --white: #fff;
            --shadow: 0 4px 24px rgba(44, 85, 69, 0.1);
            --radius: 12px;
            --transition: all 0.3s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: var(--bg-page);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: var(--text-color);
            line-height: 1.6;
        }

        .header {
            background: var(--primary-color);
            color: var(--white);
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .logo {
            display: flex;
            align-items: center;
        }

        .logo i {
            font-size: 1.8rem;
            margin-right: 0.8rem;
        }

        .logo h1 {
            font-size: 1.5rem;
            font-weight: 600;
        }

        .user-info {
            display: flex;
            align-items: center;
        }

        .user-info i {
            font-size: 1.2rem;
            margin-right: 0.5rem;
        }

        .logout-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: var(--white);
            padding: 0.5rem 1rem;
            border-radius: 4px;
            cursor: pointer;
            transition: var(--transition);
            margin-left: 1rem;
            display: flex;
            align-items: center;
        }

        .logout-btn i {
            margin-right: 0.5rem;
        }

        .logout-btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 2rem;
        }

        .content-card {
            background: var(--white);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 2rem;
            margin-bottom: 2rem;
            border: 1px solid var(--border-color);
        }

        .page-title {
            color: var(--primary-color);
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
        }

        .page-title i {
            margin-right: 1rem;
        }

        .btn {
            padding: 0.8rem 1.5rem;
            border-radius: var(--radius);
            border: none;
            cursor: pointer;
            font-weight: 500;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
        }

        .btn i {
            margin-right: 0.5rem;
        }

        .btn-secondary {
            background: var(--bg-light);
            color: var(--text-color);
            border: 1px solid var(--border-color);
        }

        .btn-secondary:hover {
            background: #e1e8e4;
            transform: translateY(-2px);
        }

        .btn-primary {
            background: var(--primary-color);
            color: var(--white);
        }

        .btn-primary:hover {
            background: var(--primary-hover);
            transform: translateY(-2px);
        }

        .form-label {
            font-weight: 500;
            color: var(--text-color);
            margin-bottom: 0.5rem;
            display: block;
        }

        .form-control, .form-select {
            border-radius: var(--radius);
            padding: 0.75rem;
            border: 1px solid var(--border-color);
            background: var(--bg-light);
            transition: var(--transition);
            width: 100%;
        }

        .form-control:focus, .form-select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(44, 85, 69, 0.25);
            background: var(--white);
            outline: none;
        }

        .input-group {
            display: flex;
            margin-bottom: 1rem;
        }

        .input-group-text {
            display: flex;
            align-items: center;
            padding: 0.75rem;
            background: var(--bg-light);
            border: 1px solid var(--border-color);
            border-right: none;
            border-radius: var(--radius) 0 0 var(--radius);
            color: var(--primary-color);
        }

        .form-section {
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--border-color);
        }

        .form-section:last-child {
            border-bottom: none;
        }

        .form-section-title {
            font-size: 1.2rem;
            color: var(--primary-color);
            margin-bottom: 1.5rem;
            font-weight: 600;
            display: flex;
            align-items: center;
        }

        .form-section-title i {
            margin-right: 0.8rem;
        }

        #content-container {
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            overflow: hidden;
        }

        .ck-editor__editable {
            min-height: 300px;
            background: var(--white);
        }

        #coverPreview img {
            max-width: 100%;
            height: auto;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }

        .badge {
            padding: 0.4rem 0.8rem;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
        }

        .bg-success {
            background: var(--primary-light) !important;
            color: var(--white);
        }

        .form-text {
            color: var(--text-light);
            font-size: 0.85rem;
            margin-top: 0.5rem;
        }

        .action-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            margin-top: 2rem;
        }

        @media (max-width: 768px) {
            .header {
                flex-direction: column;
                text-align: center;
                padding: 1rem;
            }

            .user-info {
                margin-top: 1rem;
            }

            .action-buttons {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
<div class="header">
    <div class="logo">
        <i class="fas fa-store"></i>
        <h1>测盟汇系统</h1>
    </div>
    <div class="user-info">
        <i class="fas fa-user-shield"></i>
        <span>超级管理员：<span th:text="${session.user.username}"></span></span>
        <a th:href="@{/user/logout}" class="logout-btn">
            <i class="fas fa-sign-out-alt"></i>
            退出登录
        </a>
    </div>
</div>

<div class="container">
    <div class="content-card">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="page-title"><i class="fas fa-edit"></i> 编辑动态</h1>
            <a href="/admin_list" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> 返回列表
            </a>
        </div>

        <form id="editForm">
            <input type="hidden" id="id">

            <!-- 基本信息部分 -->
            <div class="form-section">
                <div class="form-section-title">
                    <i class="fas fa-info-circle"></i> 基本信息
                </div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="author" class="form-label">作者</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-user"></i></span>
                            <input type="text" class="form-control" id="author" required placeholder="请输入作者名称">
                        </div>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="title" class="form-label">标题</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-heading"></i></span>
                            <input type="text" class="form-control" id="title" required placeholder="请输入文章标题">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 简介部分 -->
            <div class="form-section">
                <div class="form-section-title">
                    <i class="fas fa-paragraph"></i> 文章简介
                </div>
                <div class="mb-3">
                    <label for="introduction" class="form-label">简介</label>
                    <textarea class="form-control" id="introduction" rows="3" placeholder="简要描述文章内容，不超过200字"></textarea>
                    <div class="form-text">简介将显示在文章列表页，吸引读者点击</div>
                </div>
            </div>

            <!-- 内容部分 -->
            <div class="form-section">
                <div class="form-section-title">
                    <i class="fas fa-file-text"></i> 详细内容
                </div>
                <div class="mb-3">
                    <label for="content" class="form-label">文章内容</label>
                    <div id="content-container">
                        <textarea id="content" name="content"></textarea>
                    </div>
                </div>
            </div>

            <!-- 封面图片 -->
            <div class="form-section">
                <div class="form-section-title">
                    <i class="fas fa-image"></i> 封面设置
                </div>
                <div class="mb-3">
                    <label for="coverUrl" class="form-label">封面图片</label>
                    <input type="file" class="form-control" id="coverUrl" accept="image/*">
                    <div class="form-text">建议尺寸：1200×630像素，支持JPG/PNG格式</div>
                    <div id="coverPreview" class="mt-3 text-center">
                        <p class="text-muted">暂无封面图片</p>
                    </div>
                </div>
            </div>

            <div class="action-buttons">
                <button type="button" class="btn btn-primary" onclick="editDynamic()">
                    <i class="fas fa-save"></i> 保存修改
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    // 初始化CKEditor
    let editor;
    ClassicEditor
        .create(document.querySelector('#content'), {
            toolbar: [
                'heading', '|',
                'bold', 'italic', 'underline', 'strikethrough', '|',
                'alignment', '|',
                'numberedList', 'bulletedList', '|',
                'outdent', 'indent', '|',
                'link', 'image', 'table', '|',
                'blockQuote', 'codeBlock', '|',
                'undo', 'redo'
            ],
            image: {
                upload: {
                    url: '/dynamic/upload-image',
                    headers: {}
                }
            }
        })
        .then(newEditor => {
            editor = newEditor;
        })
        .catch(error => {
            console.error('CKEditor初始化失败:', error);
        });

    // 获取URL参数
    function getUrlParam(name) {
        const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        const r = window.location.search.substr(1).match(reg);
        return r ? decodeURIComponent(r[2]) : null;
    }

    // 加载动态详情（含作者、简介）
    function loadDynamicDetail() {
        const id = getUrlParam('id');
        if (id) {
            $.ajax({
                url: '/dynamic/detail',
                method: 'GET',
                data: { id: id },
                success: function(response) {
                    if (response.code === 200) {
                        const dynamic = response.data;
                        // 填充表单数据
                        $('#id').val(dynamic.id);
                        $('#author').val(dynamic.author);
                        $('#title').val(dynamic.title);
                        $('#introduction').val(dynamic.introduction);
                        // 富文本内容
                        const setContent = () => {
                            if (editor) editor.setData(dynamic.content);
                            else setTimeout(setContent, 100);
                        };
                        setContent();
                        // 封面预览
                        if (dynamic.coverUrl) {
                            $('#coverPreview').html(`
                                <img src="${dynamic.coverUrl}" class="img-fluid" alt="封面预览">
                                <div class="mt-2">
                                    <span class="badge bg-success">当前封面</span>
                                </div>
                            `);
                        }
                    } else {
                        alert(response.message);
                    }
                },
                error: function() {
                    alert('加载详情失败');
                }
            });
        }
    }

    // 提交修改（含作者、简介，状态设为1）
    function editDynamic() {
        if (!editor) {
            alert('编辑器未就绪，请稍后重试');
            return;
        }

        // 收集数据
        const id = $('#id').val();
        const author = $('#author').val().trim();
        const title = $('#title').val().trim();
        const introduction = $('#introduction').val().trim();
        const content = editor.getData();
        const coverFile = $('#coverUrl')[0].files[0];

        // 验证
        if (!author) { alert('请输入作者'); return; }
        if (!title) { alert('请输入标题'); return; }

        // 封装数据（状态固定设为0）
        const formData = new FormData();
        const dynamicData = {
            id: id,
            author: author,
            title: title,
            introduction: introduction,
            content: content,
            status: 0
        };
        formData.append('dynamic', new Blob([JSON.stringify(dynamicData)], { type: 'application/json' }));
        if (coverFile) {
            formData.append('coverUrl', coverFile);
        }

        // 提交
        $.ajax({
            url: '/dynamic/edit',
            method: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                if (response.code === 200) {
                    alert('修改成功');
                    window.location.href = '/admin_list';
                } else {
                    alert('修改失败：' + response.message);
                }
            },
            error: function(xhr) {
                alert('请求错误：' + xhr.responseText);
            }
        });
    }

    // 页面加载时初始化
    $(document).ready(loadDynamicDetail);
</script>
</body>
</html>